<template>
	<view class="page" :style="'background: url('+inviteImage+') no-repeat;background-size: 100% auto;padding: 576rpx 30rpx 0;height: auto;'">
		<view class="container">
			<view class="invite-box">
				<view class="d-flex flex-column text-color-danger align-items-center mb-40">
					<view class="font-size-extra-lg font-weight-bold mb-20">邀请人奖励</view>
					<view>每邀请一位好友送3个人人豆</view>
				</view>
				<view class="d-flex just-content-center" style="opacity: 0.8;" hover-class="opacity-1">
					<button open-type="share" type='primary' class="box-shadow-bottom" style="font-size: 38rpx;border-radius: 60rpx;padding: 0 100rpx;">立即邀请好友</button>
				</view>
			</view>
				
			<view class="my-award">
				<view class="font-size-lg font-weight-bold text-center">我的奖励</view>
				<view class="d-flex just-content-center">
					<view class="item">
						<view class="font-size-lg text-color-danger">{{count}}</view>
						<view class="font-size-sm text-color-assist">已成功邀请(位)</view>
					</view>
					<view class="item">
						<view class="font-size-lg text-color-danger">{{count*3}}</view>
						<view class="font-size-sm text-color-assist">已获得奖励(人人豆)</view>
					</view>
				</view>
			</view>	
					
			<view class="my-friends">
				<view class="font-size-lg font-weight-bold text-center">我邀请的好友</view>
				<view>
					<navigator :url="'/pages/user/home?uuid=' + item.uuid" class="member-item" v-for="(item,index) in friends" :key="item.id">
						<cos-avatar :src="item.avatar" :showSex="item.user.gender?true:false" :sexIcon="item.gender_label"></cos-avatar>
						<view class="user">
							<view>
								<text class="name font-size-lg">{{item.nickname}}</text>
							</view>
							<view class="text-color-assist">
								<text class="mr-10" v-if="item.city||item.province">{{item.city||item.province}} |</text>
								<text class="mr-10">{{item.identity_label}}</text>
							</view>
						</view>
						<button v-if="item.is_follow" class="border-radius-lg font-size-sm btn-gz" type="default"  @tap.stop="cancelFollow(item,index)">已关注</button>
						<button v-else class="border-radius-lg font-size-sm btn-gz" type="primary" @tap.stop="follow(item,index)">关注</button>
					</navigator>
					<view v-if="loadStatus!='nomore'" @tap="loadMore" class="text-center mt-30 text-color-assist" >{{loadStatusText}}</view>
				</view>
			</view>	
		</view>
	</view>
	
</template>

<script>
	import {mapState, mapMutations } from 'vuex'
	export default {
		computed:{
			...mapState(['userInfo']),
		},
		data() {
			return {
				shareImage:'',
				inviteImage:'',
				friends:[],
				page: 1,
				count:0,
				loadStatus:'',
				loadStatusText:''
			}
		},
		onLoad() {
			this.getInvite();
		},
		/*
		 * uniapp微信小程序分享页面到微信好友
		*/
		onShareAppMessage(res) {
			return {
				title: this.userInfo.nickname+'邀请你加入人人约拍-严肃靠谱的模特约拍平台',
				path: '/pages/index/index?share_code='+this.userInfo.invite_code,
				imageUrl:this.shareImage
			}	
		},
		methods:{
			async getInvite() {
				if(this.page==1) {
					uni.showLoading({
						mask: true,
						title: '加载中...'
					});
				}else{
					this.loadStatus = 'loading';
					this.loadStatusText = '加载中...'
				}
				let res = await this.$api('invite')
				this.shareImage = res.data.shareImage;
				this.inviteImage = res.data.inviteImage;
				this.count       = res.data.count;
				this.friends = this.friends.concat(res.data.list);
				if (this.page === res.data.total_pages || res.data.total_pages === 0) {
					this.loadStatus = 'nomore';
				} else {
					this.page++;
					this.loadStatus = 'loadmore';
					this.loadStatusText = '点击加载更多'
				}
				uni.hideLoading();
			},
			follow(item,index) {			
				uni.showLoading({
					mask: true,
					title: '关注中...'
				});
				this.friends[index].is_follow = true;
				uni.hideLoading()
			},
			cancelFollow(item,index) {
				uni.showLoading({
					mask: true,
					title: '取消关注中...'
				});
				
				this.friends[index].is_follow = false;
				uni.hideLoading();
			},
			loadMore() {
				this.getInvite();
			}
		}
	}
</script>

<style lang="scss">
page {
	background-image:linear-gradient(#FBDE69, #F4B861);
	height: auto;
}
// .page {
	
// 	background-size: 100% auto;
// 	padding: 576rpx 30rpx 0;
// 	height: auto;
// }
.container {
	padding-bottom: 30rpx;
}
.invite-box {
	padding: 40rpx 70rpx;
	background-color: #FFFFFF;
	border-radius: 8rpx;
	display: flex;
	flex-direction: column;
	position: relative;
	margin-bottom: 30rpx;
}

.progress-box {
	width: 100%;
	margin: 20rpx 0;
}

.to-invite-img {
	width: 16rpx;
	margin-left: 10rpx;
}

.opacity-1 {
	opacity: 1 !important;
}

.my-award {
	padding: 30rpx 0;
	background-color: #FFFFFF;
	border-radius: 8rpx;
	margin-bottom: 30rpx;
	position: relative;
	
	.my-award-img {
		width: 291rpx;
		position: absolute;
		top: -15rpx;
	}
	
	.item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		
		&::after {
			position: absolute;
			content: ' ';
			background-color: #ccc;
			width: 2rpx;
			height: 100%;
			right: 0;
			top: 0;
			transform: scaleY(0.5);
		}
		
		&:nth-last-child(1) {
			&::after {
				width: 0;
			}
		}
	}
}
.my-friends {
	padding: 30rpx 0;
	background-color: #FFFFFF;
	border-radius: 8rpx;
	margin-bottom: 30rpx;
	position: relative;
}
.member-item {
	display: flex;
	align-items: center;
	padding: 20rpx;
	border-bottom: 2rpx solid #f5f5f5;
	background-color: #ffffff;
	&:last-child{
		border-bottom: 0;
	}
	
}

.member-item .icon-nv {
	color: #ff4d94;
}

.member-item .icon-nan {
	color: #0091ff;
}

.member-item .avatar {
	margin-right: 20rpx;
}

.member-item .user .name {
	margin-right: 20rpx;
}

.member-item .user .iconfont {
	font-size: 24rpx;
}

.member-item .btn-gz {
	margin-left: auto;
}
</style>
